<template>
  <div class="home">
    <!-- <img class="home-bg" src="@/assets/images/welcome.png" alt="welcome" /> -->
    <el-row :gutter="10">
      <el-col :span="8">
        <draggable
          class="grid-container"
          handle=".handle"
          v-model="grid1List"
          item-key="type"
          animation="300"
          chosen-class="chosen"
          group="people"
          @change="draggableChange"
        >
          <template #item="{ element }">
            <div class="item" :class="'item-' + element.id">
              <div class="item-title-box handle">
                <div class="item-title">{{ element.title || element.id }}</div>
                <div class="btn" @click="element.show = !element.show">
                  <el-icon v-if="element.show"><Minus /></el-icon>
                  <el-icon v-else><Plus /></el-icon>
                </div>
              </div>
              <div v-if="element.show" style="min-height: 55px">
                <!-- 工单解决情况 -->
                <StatusCountBox v-if="element.type == 'statusCount'"></StatusCountBox>
                <!-- 工单分配情况 -->
                <ServicesOrgNameCountBox v-if="element.type == 'servicesOrgNameCount'"></ServicesOrgNameCountBox>
                <!-- 工单统计 -->
                <WorkOrderBox v-if="element.type == 'newWorkOrder'"></WorkOrderBox>
                <!-- 新增工单 -->
                <NewWorkList v-if="element.type == 'newWorkList'"></NewWorkList>
                <!-- 工单分类 -->
                <WorkOrderClassifyBox v-if="element.type == 'workOrderClassifyBox'"></WorkOrderClassifyBox>
                <!-- 技术员工作量 -->
                <TechnicianWorkloadBox v-if="element.type == 'technicianWorkloadBox'"></TechnicianWorkloadBox>
                <!-- 技术员SLA按时完成率 -->
                <TechnicianSLAcompletionRate v-if="element.type == 'technicianSLAcompletionRate'"></TechnicianSLAcompletionRate>
                <!-- 部门故障分布 -->
                <DepartmentalFaultDistributionBox
                  v-if="element.type == 'departmentalFaultDistributionBox'"
                ></DepartmentalFaultDistributionBox>
              </div>
            </div>
          </template>
        </draggable>
      </el-col>
      <el-col :span="8">
        <draggable
          class="grid-container"
          handle=".handle"
          v-model="grid2List"
          item-key="type"
          animation="300"
          chosen-class="chosen"
          group="people"
          @change="draggableChange"
        >
          <template #item="{ element }">
            <div class="item" :class="'item-' + element.id">
              <div class="item-title-box handle">
                <div class="item-title">{{ element.title || element.id }}</div>
                <div class="btn" @click="element.show = !element.show">
                  <el-icon v-if="element.show"><Minus /></el-icon>
                  <el-icon v-else><Plus /></el-icon>
                </div>
              </div>
              <div v-if="element.show" style="min-height: 55px">
                <!-- 工单解决情况 -->
                <StatusCountBox v-if="element.type == 'statusCount'"></StatusCountBox>
                <!-- 工单分配情况 -->
                <ServicesOrgNameCountBox v-if="element.type == 'servicesOrgNameCount'"></ServicesOrgNameCountBox>
                <!-- 工单统计 -->
                <WorkOrderBox v-if="element.type == 'newWorkOrder'"></WorkOrderBox>
                <!-- 新增工单 -->
                <NewWorkList v-if="element.type == 'newWorkList'"></NewWorkList>
                <!-- 工单分类 -->
                <WorkOrderClassifyBox v-if="element.type == 'workOrderClassifyBox'"></WorkOrderClassifyBox>
                <!-- 技术员工作量 -->
                <TechnicianWorkloadBox v-if="element.type == 'technicianWorkloadBox'"></TechnicianWorkloadBox>
                <!-- 技术员SLA按时完成率 -->
                <TechnicianSLAcompletionRate v-if="element.type == 'technicianSLAcompletionRate'"></TechnicianSLAcompletionRate>
                <!-- 部门故障分布 -->
                <DepartmentalFaultDistributionBox
                  v-if="element.type == 'departmentalFaultDistributionBox'"
                ></DepartmentalFaultDistributionBox>
              </div>
            </div>
          </template>
        </draggable>
      </el-col>
      <el-col :span="8">
        <draggable
          class="grid-container"
          handle=".handle"
          v-model="grid3List"
          item-key="type"
          animation="300"
          chosen-class="chosen"
          group="people"
          @change="draggableChange"
        >
          <template #item="{ element }">
            <div class="item" :class="'item-' + element.id">
              <div class="item-title-box handle">
                <div class="item-title">{{ element.title || element.id }}</div>
                <div class="btn" @click="element.show = !element.show">
                  <el-icon v-if="element.show"><Minus /></el-icon>
                  <el-icon v-else><Plus /></el-icon>
                </div>
              </div>
              <div v-if="element.show" style="min-height: 55px">
                <!-- 工单解决情况 -->
                <StatusCountBox v-if="element.type == 'statusCount'"></StatusCountBox>
                <!-- 工单分配情况 -->
                <ServicesOrgNameCountBox v-if="element.type == 'servicesOrgNameCount'"></ServicesOrgNameCountBox>
                <!-- 工单统计 -->
                <WorkOrderBox v-if="element.type == 'newWorkOrder'"></WorkOrderBox>
                <!-- 新增工单 -->
                <NewWorkList v-if="element.type == 'newWorkList'"></NewWorkList>
                <!-- 工单分类 -->
                <WorkOrderClassifyBox v-if="element.type == 'workOrderClassifyBox'"></WorkOrderClassifyBox>
                <!-- 技术员工作量 -->
                <TechnicianWorkloadBox v-if="element.type == 'technicianWorkloadBox'"></TechnicianWorkloadBox>
                <!-- 技术员SLA按时完成率 -->
                <TechnicianSLAcompletionRate v-if="element.type == 'technicianSLAcompletionRate'"></TechnicianSLAcompletionRate>
                <!-- 部门故障分布 -->
                <DepartmentalFaultDistributionBox
                  v-if="element.type == 'departmentalFaultDistributionBox'"
                ></DepartmentalFaultDistributionBox>
              </div>
            </div>
          </template>
        </draggable>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref } from "vue";
import draggable from "vuedraggable";
import StatusCountBox from "@/components/Index/StatusCountBox/index.vue";
import ServicesOrgNameCountBox from "@/components/Index/ServicesOrgNameCountBox/index.vue";
import WorkOrderBox from "@/components/Index/WorkOrderBox/index.vue";
import WorkOrderClassifyBox from "@/components/Index/WorkOrderBox/classifyBox.vue";
import NewWorkList from "@/components/Index/NewWorkList/index.vue";
import TechnicianWorkloadBox from "@/components/Index/TechnicianBox/WorkloadBox.vue";
import TechnicianSLAcompletionRate from "@/components/Index/TechnicianBox/SLAcompletionRate.vue";
import DepartmentalFaultDistributionBox from "@/components/Index/DepartmentalFaultDistributionBox/index.vue";
import KnowledgeStatisticsBox from "@/components/Index/Knowledge/StatisticsBox.vue";

const grid1List = ref<any[]>([]);
const grid2List = ref<any[]>([]);
const grid3List = ref<any[]>([]);

grid1List.value = [
  { title: "工单解决情况", type: "statusCount", show: true },
  { title: "工单分配情况", type: "servicesOrgNameCount", show: true },
  { title: "部门故障分布", type: "departmentalFaultDistributionBox", show: true }
];
grid2List.value = [
  { title: "工单统计", type: "newWorkOrder", show: true },
  { title: "新增工单", type: "newWorkList", show: true }
];
grid3List.value = [
  { title: "技术员SLA完成率", type: "technicianSLAcompletionRate", show: true },
  { title: "工单分类", type: "workOrderClassifyBox", show: true },
  { title: "技术员工作量", type: "technicianWorkloadBox", show: true }
];

let timer;
const draggableChange = () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    clearTimeout(timer);
    localStorage.setItem("grid1List", JSON.stringify(grid1List.value));
    localStorage.setItem("grid2List", JSON.stringify(grid2List.value));
  }, 100);
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  min-height: 100%;
  .grid-container {
    min-height: 100%;
    .item {
      // min-height: 50px;
      margin-bottom: 10px;
      overflow: hidden;
      background-color: #ffffff;
      border: 1px solid #ffffff;
    }
    .chosen {
      border: 1px solid $primary-color !important;
    }
    .item-title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      cursor: move;
      border-bottom: 1px solid #e5e4e9;
      .item-title {
        height: 44px;
        font-size: 15px;
        line-height: 44px;
      }
      .btn {
        cursor: pointer;
      }
    }
  }
}
</style>
